<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="ipt">
    <div id="h">{{name}}</div>
    
    <script>
        //模拟vue双向数据绑定
        const obj = {}
        document.querySelector('#ipt').oninput = function(e){
            obj.name = e.target.value
            console.log(name)
        }
        Object.defineProperty(obj,'name',{
            set(value){
                document.querySelector('#h').innerHTML = value
                document.querySelector("#ipt").value = value
            }
        })

        //模拟vue2响应数据
        let person = {
            name:'张三',
            age:19,
            job:"coder"
        }
        let p = {}

        Object.defineProperty(p,'name',{
            configurable:true,//可配置的
            get(){
                console.log('有人读取了name')
                return person.name
            },
            set(value){
                console.log('有人设置了name')
                person.name = value
            }
        })
        Object.defineProperty(p,'age',{
            get(){
                console.log('有人读取了age')
                return person.age
            },
            set(value){
                console.log('有人设置了age')
                person.age = value
            }
        })
        //模拟vue3响应数据
        let animal = {
            type:"dog",
            eat:"meat"
        }
        //Reflect包含并优化了Object身上的属性方法
        let p2 = new Proxy(animal,{
            get(target,propName){
                console.log(`有人读取了${propName}上的属性`)
                return Reflect.get(target,propName)
            },
            //修改某个对象的属性、或给对象身上增加某个属性的时候
            set(target,propName,value){
                console.log(`有人修改了${propName}上的属性`)
                // target[propName] = value
                Reflect.set(target,propName,value)
            },
            defineProperty(target,propName){
                console.log(`有人删除了${propName}上的属性`)
                // return delete target[propName]
                return Reflect.defineProperty(target,propName)
            }
        })


    </script>


</body>
</html>